<template>
	<a-config-provider :locale="locale">
		<a-layout class="master-layout">
			<a-layout-sider :trigger="null" collapsible v-model="collapsed" :width="272" :collapsedWidth="0">
				<div class="logo">
					南航ITPM同步插件
				</div>
				<a-menu theme="dark" mode="inline">
					<template v-for="item in menuList">
						<a-menu-item v-if="!item.children" :key="item.name"
							@click="() => $router.push({ name: item.name })">
							<a-icon :type="item.meta.icon" />
							<span>{{ item.meta.title }}</span>
						</a-menu-item>
						<a-sub-menu v-else :key="item.key">
							<span slot="title">
								<a-icon :type="item.meta.icon" />
								<span>{{ item.meta.title }}</span>
							</span>
							<a-menu-item v-for="childrenItem in item.children" :key="childrenItem.name"
								@click="() => $router.push({ name: childrenItem.name })">
								<span>{{ childrenItem.meta.title }}</span>
							</a-menu-item>
						</a-sub-menu>
					</template>
				</a-menu>
			</a-layout-sider>
			<a-layout>
				<a-layout-header>
					<a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'"
						@click="() => collapsed = !collapsed" />
					<div class="backlogItpm" @click="onclickBacklogItpm">
						<a-icon style="font-size:16px" type="bell" />
						待办关联ITPM项目
						<a-badge :dot="true" />
					</div>
					<div class="user">
						<a-dropdown>
							<span class="user-center-wrapper ant-dropdown-link">
								<a-icon class="user-center-avatar" type="user" />
								广州卓术
							</span>
							<a-menu slot="overlay" @click="handleMenuClick">
								<a-menu-item>
									<a>
										<div class="user-center-wrapper-item">
											<a-icon type="logout" />&nbsp;登出
										</div>
									</a>
								</a-menu-item>
							</a-menu>
						</a-dropdown>
					</div>
				</a-layout-header>
				<a-layout-content>
					<router-view></router-view>
				</a-layout-content>
			</a-layout>
		</a-layout>
	</a-config-provider>
</template>
<script>
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
import myRouter from '@/pages/index/router/myRouter'
import 'moment/locale/zh-cn'
export default {
	name: 'app',
	data() {
		return {
			name: this.$route.name,
			locale: zh_CN,
			collapsed: false,
			menuList: [],//表示菜单选项内容
		}
	},
	created() {
		this.menuList = myRouter;
	},
	computed: {
	},
	methods: {
		handleMenuClick(e) {
			if (e.key === 'item_0') {//点击了退出
				location.href = 'login.html';
			}
		},
		onclickBacklogItpm() {
			this.$router.push({ name: 'ItpmProjectManagement' });
		},
	}
}
</script>
<style scoped>
</style>
